<template>
	<view>
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="auth_step_img">
				<image src="../../static/images/auth_step2.png" mode=""></image>
			</view>
			<view class="auth_step_info_box">
				<view class="auth_step_info_title"><text>银行卡信息</text></view>
				<!-- <view class="phone_login_input_box">
					<view class="phone_login_input_name">户名</view>
					<view class="phone_login_input_inp">
						<input type="text" :focus="true" v-model="name" maxlength="11" placeholder="请输入户名"/>
					</view>
				</view>	 -->
				<view class="phone_login_input_box">
					<view class="phone_login_input_name">所属银行</view>
					<view class="pick_box">
						 <view class="pick_inp_box" @click="handleSelect()">
						 	<view class="pick_input pick_input1"  v-if="bank_name==''">请选择所属银行</view>
						 	<view class="pick_input" v-if="bank_name!=''">{{bank_name}}</view>
						 </view>
						 <view class="pick_img">
							<image src="https://www.cccshansong.com/chong_weapp/auth_bottom.png" mode=""></image>
						 </view>
					</view>
				</view>
				<view class="phone_login_input_box">
					<view class="phone_login_input_name">开户行</view>
					<view class="phone_login_input_inp">
						<input type="text"  v-model="bank_small_name" @input="onNameInput"  maxlength="30" placeholder="请输入开户行"/>
					</view>
				</view>
				<view class="phone_login_input_box">
					<view class="phone_login_input_name">银行卡号</view>
					<view class="phone_login_input_inp">
						<input type="number"  v-model="bank_no" maxlength="19" placeholder="请输入银行卡号"/>
					</view>
				</view>
			</view>

		</view>
		<view class="record_fix_box">
			<view class="record_fix_btn1" hover-class="hover_class" @click="goBack()">上一步</view>
			<view class="record_fix_btn" hover-class="hover_class" @click="handleSubmit()">提交</view>
		</view>
		<lzcPicker ref="lzcPicker" @change="changeBankItem" :pickerList="bankList" pickerTittle='选择所属银行' />
	</view>
</template>

<script>
	import lzcPicker from '@/components/lzc-picker/lzc-picker.vue'
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			lzcPicker,
			navigationCustom,
		},
		data() {
			return {
				step_one_info:null,
				select_bankId:0,
				bank_temp_list:[],
				bankList: [],
				bank_name:'',
				bank_small_name:'',
				bank_no:'',
				btn_status:true,
				date: null,
				name:'',
				idcard:'',
				statusHeight:0,
				config: {
					title: "实名认证", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad(e) {
			var a = this
			a.action_url = a.globalurl + 'upload/imageUpload'
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 36
			a.getBank()
			const auth_info = uni.getStorageSync('auth_info');
			if(auth_info){
				a.step_one_info = auth_info
				// uni.removeStorageSync('auth_info');
			}
			if(e.type){
				a.getUserInfo()
			}
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,1)'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
		},
		methods: {
			onNameInput(event){
				console.log(event.target.value)
				if(event.target.value.length==30){
					uni.showToast({
						title:'开户行已达到字数限制',
						icon:'none'
					})
				}
			},
			getUserInfo(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('user/info',{
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							if(res.data.data.info){
								a.bank_name = res.data.data.info.bank
								a.bank_small_name =  res.data.data.info.bank_address
								a.bank_no = res.data.data.info.bank_code
							}
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			goBack(){
				uni.navigateBack()
			},
			getBank(){
				var a = this
				a.globalajax('common/getBank',{
				},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						if(res.data.code==200){
							a.bank_temp_list = res.data.data
							var temp_list = res.data.data
							for (var i = 0; i < temp_list.length; i++) {
								a.bankList.push(temp_list[i].name)
							}
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			handleSelect() {
				this.$refs.lzcPicker.handleShow();
			},
			//选择开户行
			changeBankItem(name) {
				this.bank_name = name
				var that = this
				var temp_arr = that.bank_temp_list
				for (var i = 0; i < temp_arr.length; i++) {
					if (temp_arr[i].name == name) {
						that.select_bankId = temp_arr[i].id
					}
				}
				console.log(that.select_bankId)
			},
			handleSubmit(){
				var a = this
				if (a.bank_name == '') {
					uni.showToast({
						title: '请选择所属银行',
						icon: 'none'
					})
				}else if (a.bank_small_name == '') {
					uni.showToast({
						title: '请输入开户行',
						icon: 'none'
					})
				} else if (a.bank_no == '') {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none'
					})
				} else if (!/^([1-9]{1})(\d{15}|\d{16}|\d{18})$/.test(a.bank_no)) {
					uni.showToast({
						title: '银行卡号格式不正确',
						icon: 'none'
					})
				}else{
					if(a.btn_status){
						a.btn_status = false
						a.globalajax('user/modify',{
							bank:a.bank_name,
							bank_address:a.bank_small_name,
							bank_code:a.bank_no,
							id_card_number:a.step_one_info.idcard,
							period:a.step_one_info.date,
							name:a.step_one_info.name,
							id_card:a.step_one_info.idcard_url1,
							idcard_reverse:a.step_one_info.idcard_url2,
							gender:a.step_one_info.sex,
							health:a.step_one_info.health,
							lat: uni.getStorageSync('latitude'),
							lng: uni.getStorageSync('longitude'),
						},'POST',function(res) {
								console.log(res);
								uni.hideLoading()
								setTimeout(()=>{
									a.btn_status = true
								},1500)
								if(res.data.code==200){
									uni.redirectTo({
										url:'/pages/user/authSucc'
									})
								}else{
									a.$showModal({
										title:'友情提示',
										content:res.data.msg,
										showCancel:false,
										confirmText:'我知道了',
										success: (res) => {
										}
									});
								}
							}
						);
					}
				}
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();

			    if (type === 'start') {
			        year = year;
			    } else if (type === 'end') {
			        year = year + 100;
			    }
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindDateChange: function(e) {
			    this.date = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}
	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.page_item_bj {
		width: 750rpx;
		height:664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.page_content_box{
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index:1;
		.auth_step_img{
			width: 656rpx;
			height: 104rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom:40rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.auth_step_info_box{
			width: 686rpx;
			// height: 558rpx;
			height: 460rpx;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			.auth_step_info_title{
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 2rpx solid rgba(235, 238, 245, 1);
				margin-bottom: 30rpx;
				text{
					color: rgba(48, 49, 51, 1);
					font-size: 32rpx;
					margin-left: 24rpx;
					font-weight: bold;
				}
			}
			.cargo_img_box{
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 20rpx;
				.cargo_img_item_box{
					width: 312rpx;
					height: 232rpx;
					border-radius: 12rpx;
					background: rgba(245, 246, 248, 1);
					border: 2rpx solid rgba(228, 231, 237, 1);
					.cargo_img_item_img_box{
						width: 312rpx;
						height: 232rpx;
						border-radius: 12rpx;
						background: rgba(245, 246, 248, 1);
						position: relative;
						.cargo_img_item_img_del{
							background-color: #f5222d;
							font-size: 24rpx;
							position: absolute;
							width: 35rpx;
							height: 35rpx;
							line-height: 35rpx;
							text-align: center;
							top: 0;
							right: 0;
							z-index: 7;
							color: #fff;
							border-radius:0 10rpx 0 0;
						}
						image{
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}
					.cargo_img_item_tip{
						.cargo_img_item_tip_text{
							width: 312rpx;
							height: 56rpx;
							border-radius: 0rpx 0rpx 12rpx 12rpx;
							background: rgba(255, 107, 0, 0.1);
							text-align: center;
							line-height: 56rpx;
							color:rgba(255, 107, 0, 1);
							font-size: 28rpx;
						}
						.cargo_img_item_tip_img{
							height:178rpx;
							width: 312rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								width: 150rpx;
								height: 100rpx;
							}
						}

					}

				}
			}
			.phone_login_input_box{
				width:638rpx;
				height: 88rpx;
				border-radius: 16rpx;
				background: #F5F6F8;
				margin: 0 auto;
				display: flex;
				margin-bottom: 20rpx;
				.pick_box{
					position: relative;
					font-size: 28rpx;
					width: 434rpx;
					height: 88rpx;
					.pick_img{
						width: 56rpx;
						height: 56rpx;
						margin-left:396rpx;
						image{
							width: 44rpx;
							height: 44rpx;
							margin-top:24rpx;
						}
					}
					.pick_inp_box{
						z-index: 9;
						position: absolute;
						top: 0;
						left: 0;
						width: 434rpx;
						height: 88rpx;
						.pick_input{
							height: 88rpx;
							line-height: 88rpx;
							text-align: left;
							font-size: 30rpx;
						}
						.pick_input1{
							font-size: 30rpx;
							color: #808080;
						}
					}
					picker{
						z-index: 9;
						position: absolute;
						top: 0;
						left: 0;
						width: 434rpx;
						height: 88rpx;
						.pick_input{
							height: 88rpx;
							line-height: 88rpx;
							text-align: left;
							font-size: 30rpx;
						}
						.pick_input1{
							font-size: 30rpx;
							color: #808080;
						}
					}
				}
				.phone_login_input_name{
					width: 156rpx;
					height: 88rpx;
					padding-left: 24rpx;
					line-height: 88rpx;
					color: #303133;
					font-size: 30rpx;
					font-weight: bold;
				}
				.phone_login_input_inp{
					width: 434rpx;
					height: 88rpx;
					position: relative;
					.reg_form_item_pwd{
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 13rpx;
						right: 12rpx;
						image{
							width: 33rpx;
							height: 33rpx;
						}
					}
					.phone_login_input_code{
						position: absolute;
						top: 13rpx;
						right: 12rpx;
						color: rgba(255, 107, 0, 1);
						font-size: 28rpx;
						z-index: 90;
						width: 190rpx;
						height: 64rpx;
						text-align: center;
						line-height: 64rpx;
						border-radius: 12rpx;
						background-color: rgba(255, 122, 0, 0.1);
					}
					input{
						height: 88rpx;
						line-height: 88rpx;
						font-size: 30rpx;
					}
				}
			}
		}
	}
	.record_fix_box{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		width: 750rpx;
		padding-top: 16rpx;
		box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(0,0,0,0.0800);
		padding-bottom: calc(16rpx +  constant(safe-area-inset-bottom));
		padding-bottom: calc(16rpx +  env(safe-area-inset-bottom));
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		.record_fix_btn1{
			width: 176rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 16rpx;
			background:rgba(245, 246, 248, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(96, 98, 102, 1);
			font-size: 30rpx;
			margin-right: 20rpx;
		}
		.record_fix_btn{
			width: 490rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 16rpx;
			background:#418aff;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
		}
	}
</style>
